<template>
  <div class="list">
    <Content title="美食">
      <!-- 
          在组件的标签内部书写的内容就是插入给组件内部的插槽内容
       -->
      <template v-slot:content>
        <img src="http://www.atguigu.com/images/index_new/logo.png" alt="" />
      </template>
    </Content>
    <Content title="电影">
      <!-- 
        如果在传入插槽结构的时候，没有使用v-slot，则当前默认寻找匿名插槽(默认插槽)
        使用v-slot指令必须放在组件上 或者template标签上
        v-slot:default 就是默认插槽  v-slot可以简写为 #
       -->
      <template v-slot:default>
        <ul>
          <li>战狼1</li>
          <li>战狼2</li>
          <li>战狼3</li>
        </ul>
      </template>
    </Content>
    <Content title="游戏">
      <template>
        <div>默认</div>
      </template>
      <template #content>
        <ol>
          <li>DNF1</li>
          <li>DNF2</li>
          <li>DNF3</li>
        </ol>
      </template>
    </Content>
  </div>
</template>

<script>
import Content from "@/components/Content";
export default {
  name: "App",
  components: {
    Content,
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.list {
  display: flex;
  justify-content: space-between;
}
</style>
